<template>
    <h1 class="titles">

        <div class="titles-left">
            {{title}}
            <small v-if='subhead' class="subhead">{{subhead}}</small>
        </div>

        <el-breadcrumb separator=">" class='titles-right'>
            <el-breadcrumb-item :to="{ path: '/' }"><i class="fa fa-dashboard"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if='!subhead'> HR数据看板 </el-breadcrumb-item>
            <el-breadcrumb-item v-if='subhead'>{{subhead}}</el-breadcrumb-item>
            <el-breadcrumb-item v-if='!subhead'>{{third}}</el-breadcrumb-item>
        </el-breadcrumb>
    </h1>
</template>

<script>
import Vue from "vue";
import { Breadcrumb, BreadcrumbItem } from "element-ui";
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
export default {
  props: ["title", "subhead"],
  computed: {
    third() {
      if (this.title == "全集团HR数据看板") {
        return this.title;
      } else {
        return this.title.substring(0, 4);
      }
    }
  }
};
</script>

<style scoped>
.subhead {
  font-size: 15px;
  display: inline-block;
  padding-left: 4px;
  font-weight: 300;
  color: #777;
}
.fa-dashboard {
  position: relative;
  position: relative;
  top: -1px;
  right: 4px;
}
.titles {
  overflow: hidden;
}

.titles .titles-left {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  line-height: 60px;
  float: left;
}



.titles .titles-right {
  line-height: 60px;
  float: right;
}
</style>